<template>
	<view>
		<u-navbar title="" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="main">
		    <view class="top">
				<view class="userInfo">
					<view class="headicon">
						  <u--image  height="5rem" width="5rem" shape="circle" :src="otherInfo.avatar"></u--image>
							<view class="btnBox">
								<view class="direct" @click="toChat">
										<u-button  :plain="true" text="私信"></u-button>
									</view>
								<view class="bigBtn" @click="press">
									<u-button v-if="otherInfo.isFollow" :plain="true" text="已关注"></u-button>
									<u-button v-else :plain='true' text="关注"></u-button>
								</view>
							</view>
					</view>
					<view class="titleName">
					    <view class="name">{{ otherInfo.nickName }}</view>
						<u-icon class="icon" v-if="otherInfo.sex == '女生'" name="woman" color="#ff579e" size="1.8rem">
						</u-icon>
						<u-icon class="icon" v-if="otherInfo.sex == '男生'" name="man" color="#3785fd" size="1.8rem">
						</u-icon>
					</view>
					<view>
					</view>
					<view class="id">
						<span>ID:{{otherInfo.id}}</span>
					</view>
					<!-- <view class="focus">
						<span @click="goFocus">关注列表</span>
						<span @click="goFan">粉丝列表</span>
					</view> -->
				</view>
			</view>
			<view class="showArea">
			    <!-- 动态 -->
			
			    <!-- 我的书架 -->
			    <view class="item active">
			        <view class="title">ta的书架</view>
			    </view>
			</view>
			<!-- 展示动态 -->
			
			<!-- 展示书架 -->
			<scroll-view :style="'height:'+bottomBoxHeight+'px;'" scroll-y="true" class="bookshelf">
			    <bookShelf :bookShelf="getOtherBook" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import _ from 'lodash'
	import {mapGetters} from 'vuex'
	import bookShelf from '../optionArea/bookShelf.vue'
	export default{
		components:{
			bookShelf,
		},
		data(){
			return{
				bookShelf: [
				    {
				        id: 1,
				        bookTitle: '第一本书',
				        coverImage: 'http://182.61.31.180:5000/images/1654483304823_地图.webp',//书籍封面
				        curprice: '12.00',
				        status: '1',//0为未售出，1为已售出
				    },
				    {
				        id: 1,
				        bookTitle: '第一本书',
				        coverImage: 'http://182.61.31.180:5000/images/1654483304823_地图.webp',//书籍封面
				        curprice: '12.00',
				        status: '0',//0为未售出，1为已售出
				    },
				    {
				        id: 1,
				        bookTitle: '第一本书',
				        coverImage: 'http://182.61.31.180:5000/images/1654483304823_地图.webp',//书籍封面
				        curprice: '12.00',
				        status: '1',//0为未售出，1为已售出
				    },
				    {
				        id: 1,
				        bookTitle: '第一本书',
				        coverImage: 'http://182.61.31.180:5000/images/1654483304823_地图.webp',//书籍封面
				        curprice: '12.00',
				        status: '1',//0为未售出，1为已售出
				    },
				    {
				        id: 1,
				        bookTitle: '第一本书',
				        coverImage: 'http://182.61.31.180:5000/images/1654483304823_地图.webp',//书籍封面
				        curprice: '12.00',
				        status: '1',//0为未售出，1为已售出
				    },
				    {
				        id: 1,
				        bookTitle: '第一本书',
				        coverImage: 'http://182.61.31.180:5000/images/1654483304823_地图.webp',//书籍封面
				        curprice: '12.00',
				        status: '1',//0为未售出，1为已售出
				    },
				    {
				        id: 1,
				        bookTitle: '第一本书',
				        coverImage: 'http://182.61.31.180:5000/images/1654483304823_地图.webp',//书籍封面
				        curprice: '12.00',
				        status: '1',//0为未售出，1为已售出
				    },
				    {
				        id: 1,
				        bookTitle: '第一本书',
				        coverImage: 'http://182.61.31.180:5000/images/1654483304823_地图.webp',//书籍封面
				        curprice: '12.00',
				        status: '1',//0为未售出，1为已售出
				    },
				    {
				        id: 1,
				        bookTitle: '第一本书',
				        coverImage: 'http://182.61.31.180:5000/images/1654483304823_地图.webp',//书籍封面
				        curprice: '12.00',
				        status: '1',//0为未售出，1为已售出
				    },
				    {
				        id: 1,
				        bookTitle: '第一本书',
				        coverImage: 'http://182.61.31.180:5000/images/1654483304823_地图.webp',//书籍封面
				        curprice: '12.00',
				        status: '1',//0为未售出，1为已售出
				    }
				],
				otherInfo1: {
				    name: 'June',
				    avatar: 'http://182.61.31.180:5000/images/1653403893152_logo.png',
				    sex: '男',
					isFocus:true,
				},
				
			}
		},
		computed: {
			...mapGetters(['otherInfo','getOtherBook']),
		    bottomBoxHeight(){
		        return this.$tools.getScreenHeight()-400
		    }
		},
		methods:{
			press(){
				console.log(this.otherInfo)
			},
			// press: _.debounce(function(index) {
			
			// 	let data = this.Fans[index].isFollow
			// 	if (!data) {
			// 		this.$store.dispatch('getFllowUser', index)
			// 	} else {
			// 		this.$store.dispatch('unFllowUser', index)
			// 	}
			
			// }, 800),
			toChat(){
				this.$Router.push({
				    name: 'chatDetail'
				})
			},
			goFocus(){
				this.$Router.push({
				    name: 'focus'
				})
			},
			goFan(){
				this.$Router.push({
				    name: 'fan'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.showArea {
			// position:relative;
		    display: flex;
		    flex-direction: row;
		    align-items: center;
		    justify-content: space-around;
		    width: 100%;
		    height: 100%;
		    border-bottom: 1px solid #e5e5e5;
		
		    .item {
		        display: flex;
		        flex-direction: column;
		        align-items: flex-start;
		        width: 100%;
		        height: 100%;
		        padding: 0.5rem;
		        color: rgb(99, 114, 116);
		
		    }
		
		    .active {
		        color: black;
		        font-size: 1.2rem;
		    }
		
		
		}
	    .top {
	        background: $uni-color-theme-1;
	        position: relative;
	        //left: 50%;
	        top: 0;
	        //transform: translate(-50%, -30%);
	        width: 100%;
	        height: 18rem;
	        box-shadow: 0px 10px 15px -10px #ccc;
			.userInfo {
				padding-top:5rem;		
				display: flex;
			    flex-direction: column;
				margin-left: 1rem;
				.id{
					margin-top: 0.5rem;
					margin-left: 0.7rem;
					color: rgb(99, 114, 116);
				}
				.headicon{
					display: flex;
					align-items: center;
					margin-left:0rem;
					.btnBox{
						
						width: 100%;
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;
						margin-right: 1rem;
						.direct{
							margin-right: 1rem;
							display: flex;
							width: 4rem;
						}
						
					}
				}
			.focus{
				margin-top: 0.5rem;
				margin-left: 0.7rem;
				display: flex;
				justify-content: space-between;
				width:40%;
				color: rgb(99, 114, 116);
			}
			// .headicon{
			// 	display: flex;
			// 	// justify-content: flex-start;
			// 	align-items: center;
			// 	.direct{					
			// 		font-size: 1.5rem;				
			// 		width:4rem;
			// 		height:2rem;
			// 		border-radius: 0.3rem;
			// 		padding:0 1rem;
			// 	}
			// 	.bigBtn{
			// 		background-color: red;
					
			// 		// justify-content: flex-end;
					
			// 	.btn{
			// 		border-radius: 1rem;
			// 		font-size: 1rem;
			// 		border-radius: 0.3rem;
			// 	}
			// 	}
			// 	}
			.titleName {
			    display: flex;
			    flex-direction: row;
			    align-items: center;
			    justify-content: flex-start;
				margin-left: 0.8rem;
			    .icon {
			        margin-top: 0.7rem;
					margin-left: 0.5rem;
			    }
			
			    .name {
			        margin-top: 0.5rem;
			        font-size: 1.5rem;
			        color: rgb(99, 114, 116);
			        ;
			    }
			}
		}
	}
	}
</style>
